// WPT

// Unsupported attributes are commented
export const PROPERTIES = {
  // "alignment-baseline": {
  //   value: "middle",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  // "baseline-shift": {
  //   value: "1",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  // "clip-path": {
  //   value: "url(#e)",
  //   relevantElement: "g",
  //   irrelevantElement: "linearGradient",
  // },
  // "clip-rule": {
  //   value: "evenodd",
  //   relevantElement: "g",
  //   irrelevantElement: "linearGradient",
  // },
  // "color": {
  //   value: "blue",
  //   relevantElement: "g",
  //   irrelevantElement: "image",
  // },
  // "color-interpolation-filters": {
  //   value: "sRGB",
  //   relevantElement: "filter",
  //   irrelevantElement: "linearGradient",
  // },
  // "color-interpolation": {
  //   value: "linearRGB",
  //   relevantElement: "linearGradient",
  //   irrelevantElement: "image",
  // },
  // "cursor": {
  //   value: "pointer",
  //   relevantElement: "g",
  //   irrelevantElement: "defs",
  // },
  // "cx": {
  //   value: "1",
  //   relevantElement: "circle",
  //   irrelevantElement: null,
  // },
  // "cy": {
  //   value: "1",
  //   relevantElement: "circle",
  //   irrelevantElement: null,
  // },
  // "direction": {
  //   value: "rtl",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  // "display": {
  //   value: "block",
  //   relevantElement: "g",
  //   irrelevantElement: "linearGradient",
  // },
  "d": {
    value: "M0,0 L1,1",
    relevantElement: "path",
    irrelevantElement: null,
  },
  // "dominant-baseline": {
  //   value: "middle",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  "fill": {
    value: "blue",
    relevantElement: "g",
    irrelevantElement: null, // NOT_IMPLEMENT_ELEMENT "image",
  },
  // "fill-opacity": {
  //   value: "0.5",
  //   relevantElement: "g",
  //   irrelevantElement: "image",
  // },
  "fill-rule": {
    value: "evenodd",
    relevantElement: "path",
    irrelevantElement: null // NOT_IMPLEMENT_ELEMENT "image",
  },
  // "filter": {
  //   value: "url(#e)",
  //   relevantElement: "g",
  //   irrelevantElement: "linearGradient",
  // },
  // "flood-color": {
  //   value: "blue",
  //   relevantElement: "feFlood",
  //   irrelevantElement: "rect",
  // },
  // "flood-opacity": {
  //   value: "0.5",
  //   relevantElement: "feFlood",
  //   irrelevantElement: "rect",
  // },
  "font-family": {
    value: "Test Family",
    relevantElement: "text",
    irrelevantElement: "rect",
  },
  "font-size": {
    value: "50",
    relevantElement: "text",
    irrelevantElement: "rect",
  },
  // "font-size-adjust": {
  //   value: "0.5",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  // "font-stretch": {
  //   value: "expanded",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  // "font-style": {
  //   value: "italic",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  // "font-variant": {
  //   value: "small-caps",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  // "font-weight": {
  //   value: "900",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  // "glyph-orientation-vertical": {
  //   value: "90",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  "height": {
    value: "1",
    relevantElement: "rect",
    irrelevantElement: null,
  },
  // "image-rendering": {
  //   value: ["optimizeSpeed", "pixelated"],
  //   relevantElement: "image",
  //   irrelevantElement: "path",
  // },
  // "letter-spacing": {
  //   value: "1px",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  // "lighting-color": {
  //   value: "blue",
  //   relevantElement: "feDiffuseLighting",
  //   irrelevantElement: "rect",
  // },
  // "marker-end": {
  //   value: "url(#e)",
  //   relevantElement: "path",
  //   irrelevantElement: "image",
  // },
  // "marker-mid": {
  //   value: "url(#e)",
  //   relevantElement: "path",
  //   irrelevantElement: "image",
  // },
  // "marker-start": {
  //   value: "url(#e)",
  //   relevantElement: "path",
  //   irrelevantElement: "image",
  // },
  // "mask-type": {
  //   value: "alpha",
  //   relevantElement: "mask",
  //   irrelevantElement: "rect",
  // },
  // "mask": {
  //   value: "url(#e)",
  //   relevantElement: "g",
  //   irrelevantElement: "linearGradient",
  // },
  // "opacity": {
  //   value: "0.5",
  //   relevantElement: "g",
  //   irrelevantElement: "linearGradient",
  // },
  // "overflow": {
  //   value: "scroll",
  //   relevantElement: "svg",
  //   irrelevantElement: "rect",
  // },
  // "paint-order": {
  //   value: "fill stroke",
  //   relevantElement: "path",
  //   irrelevantElement: "image",
  // },
  // "pointer-events": {
  //   value: "none",
  //   relevantElement: "g",
  //   irrelevantElement: "linearGradient",
  // },
  // "r": {
  //   value: "1",
  //   relevantElement: "circle",
  //   irrelevantElement: null,
  // },
  "rx": {
    value: "1",
    relevantElement: "rect",
    irrelevantElement: null,
  },
  "ry": {
    value: "1",
    relevantElement: "rect",
    irrelevantElement: null,
  },
  // "shape-rendering": {
  //   value: "geometricPrecision",
  //   relevantElement: "path",
  //   irrelevantElement: "image",
  // },
  // "stop-color": {
  //   value: "blue",
  //   relevantElement: "stop",
  //   irrelevantElement: "rect",
  // },
  // "stop-opacity": {
  //   value: "0.5",
  //   relevantElement: "stop",
  //   irrelevantElement: "rect",
  // },
  "stroke": {
    value: "blue",
    relevantElement: "path",
    irrelevantElement: null, // NOT_IMPLEMENT_ELEMENT "image",
  },
  // "stroke-dasharray": {
  //   value: "1 1",
  //   relevantElement: "path",
  //   irrelevantElement: "image",
  // },
  // "stroke-dashoffset": {
  //   value: "1",
  //   relevantElement: "path",
  //   irrelevantElement: "image",
  // },
  "stroke-linecap": {
    value: "round",
    relevantElement: "path",
    irrelevantElement: null, // NOT_IMPLEMENT_ELEMENT "image",
  },
  "stroke-linejoin": {
    value: "round",
    relevantElement: "path",
    irrelevantElement: null, // NOT_IMPLEMENT_ELEMENT "image",
  },
  // "stroke-miterlimit": {
  //   value: "1",
  //   relevantElement: "path",
  //   irrelevantElement: "image",
  // },
  // "stroke-opacity": {
  //   value: "0.5",
  //   relevantElement: "path",
  //   irrelevantElement: "image",
  // },
  "stroke-width": {
    value: "2",
    relevantElement: "path",
    irrelevantElement: null, // NOT_IMPLEMENT_ELEMENT "image",
  },
  // "text-anchor": {
  //   value: "middle",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  // "text-decoration": {
  //   value: "underline",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  // "text-overflow": {
  //   value: "ellipsis",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  // "text-rendering": {
  //   value: "geometricPrecision",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  // "transform-origin": {
  //   value: "1px 1px",
  //   relevantElement: "g",
  //   irrelevantElement: "linearGradient",
  // },
  "transform": {
    value: "scale(2)",
    relevantElement: "g",
    irrelevantElement: null,
  },
  // "unicode-bidi": {
  //   value: "embed",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  // "vector-effect": {
  //   value: "non-scaling-stroke",
  //   relevantElement: "g",
  //   irrelevantElement: "linearGradient",
  // },
  // "visibility": {
  //   value: "hidden",
  //   relevantElement: "g",
  //   irrelevantElement: "linearGradient",
  // },
  // "white-space": {
  //   value: "pre",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  "width": {
    value: "1",
    relevantElement: "rect",
    irrelevantElement: null,
  },
  // "word-spacing": {
  //   value: "1",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  // "writing-mode": {
  //   value: "vertical-rl",
  //   relevantElement: "text",
  //   irrelevantElement: "rect",
  // },
  "x": {
    value: "1",
    relevantElement: "rect",
    irrelevantElement: null,
  },
  "y": {
    value: "1",
    relevantElement: "rect",
    irrelevantElement: null,
  },
};

export function presentationAttributeIsSupported(element, attribute, value, property) {
  let e = document.createElementNS("http://www.w3.org/2000/svg", element);
  svg.appendChild(e);
  let propertyValueBefore = getComputedStyle(e).getPropertyValue(property);
  e.setAttribute(attribute, value);
  // Also set another attribute that is likely to be a presentation attribute,
  // in order to provoke bugs.
  const otherAttribute = attribute === 'stroke' ? 'fill' : 'stroke';
  e.setAttribute(otherAttribute, 'red');
  let propertyValueAfter = getComputedStyle(e).getPropertyValue(property);
  e.remove();
  return propertyValueBefore != propertyValueAfter;
}

export function assertPresentationAttributeIsSupported(element, attribute, values, property) {
  if (typeof values === 'string')
    values = [values];
  let supported = values.some(
    value => presentationAttributeIsSupported(element, attribute, value, property));
  assert_true(
    supported,
    `Presentation attribute ${attribute}="${values.join(" | ")}" should be supported on ${element} element`
  );
}

export function assertPresentationAttributeIsNotSupported(element, attribute, values, property) {
  if (typeof values === 'string')
    values = [values];
  let supported = values.some(
    value => presentationAttributeIsSupported(element, attribute, value, property));
  assert_false(
    supported,
    `Presentation attribute ${attribute}="${values.join(" | ")}" should not be supported on ${element} element`
  );
}

export function propertiesAreSupported(properties) {
  for (let p of properties) {
    if (!CSS.supports(p, "initial")) {
      return false;
    }
  }
  return true;
}
